@import '~src/styles/main';

#speech-button {
  border-radius: 0;
  height: 38px;
  background-color: white;
  color: #0066ff;
  box-shadow: none;
  border: none;
  position: initial;
}

@-moz-document url-prefix() {
  .microphone {
    display: none;
  }
}

#speech-button:focus {
  outline: none;
}

.microphone {
  height: 25px;
  width: 25px;
}

@-moz-document url-prefix() {
  .microphone {
    display: none;
  }
}

:host{
	width: 100%;
	min-height: 100vh;
	position: relative;
}

div.outer-wrapper {
	min-height: 100vh;
	position:  relative;
	@include --center-flex();

	service-box {
		position: absolute;
		top: 20px;
		right: 30px;
	}

	div.wrapper {
		position: absolute;
		@include --center-flex-vertical();

		width: 45%;
		top: 16.5vh;

		h1 {
			font-weight: 300;
			text-align: center;
			font-size: 2.5em;
			margin: 15px 0px 0px 0px;
				font-family: 'Roboto', sans-serif;
				.loklak{
					background:#f9f2f4;
					color: var(--accent-color, $accent-color);
					font-family: Courier New;
				}
		}

		h5 {
			text-align: center;
		}

		div.search-form {
			width: 85vw;
			max-width: 584px;
			@include --center-flex();

			div.search-input {
				width: 100%;
				padding: 0px;
				margin: 20px 0px 10px 0px;
				border-radius: 2px;
				will-change: box-shadow;
				box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
				transition: box-shadow .2s cubic-bezier(.4,0,.2,1);
				@include --center-flex();

				&.focused,
				&:hover {
					box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
				}

				input#search {
					flex: 1;
					border: none;
					padding: 10px 15px;
					font-size: 16px;
					word-spacing: 1.5pt;
					letter-spacing: 0.5pt;
					box-shadow: none;
					height: 44px;
					background: #ffffff;
					&:focus {
						outline: none;
					}
				}
				#search-suffix-icon {
					pointer-events: none;
					padding: 10px 15px 10px 0px;
				}
			}
		}

		div.help-text{
			font-size: 12px;
			line-height: 1.4;
			width: 85vw;
			max-width: 584px;
			margin-bottom: 20px;

			.highlight{
				background-color: #eeeeee;
				padding: 1px 3px;
			}
		}

		div.top-hashtags {
			max-width: 584px;
			width: 85vw;
			display: flex;
			align-items: center;
			font-size: small;
			flex-direction: column;

			.top-list,
			.bottom-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.hashtag {
					display: flex;
					align-items: center;

					pre {
						margin: 0px 0px;
						font-family: 'Roboto', sans-serif;
						white-space: nowrap;
					}
				}
			}
		}
	}
}

@media (min-width: 768px) and (min-height: 500px) {
	app-footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100vw;
	}
}
